<template>
    <view class="app-goods-recommend" v-if="(goodsList && goodsList.length > 0) || onlyShowTitle">
        <view class="recommend-title dir-left-nowrap main-center">
            <view class="dir-left-nowrap cross-center">
                <view class="border"></view>
                <image class="app-icon-love"
                    :src="commentStyle? commentStyle.pic_url : '../../../static/image/icon/icon-favorite.png'"></image>
                <view class="text" :style="{color: commentStyle ? commentStyle.text_color :'#999' }">
                    {{ commentStyle ? commentStyle.text : '您或许喜欢' }}
                </view>
                <view class="border"></view>
            </view>
        </view>
        <view class="recommend-list" v-if="!onlyShowTitle && commentStyle">
            <view class="product-list main-between">
                <app-goods
                  v-for="(goods,idx) in goodsList" :key="goods.id"
                  :no_extra="true"
                  :listStyle="parseInt(commentStyle ?commentStyle.list_style: 2)"
                  :index="idx"
                  :theme="theme"
                  :goods="goods"
                  :show_time="false"
                  :c_border_top="16"
                  :showBuyBtn="showBuyBtn"
                  :extra="showSales ? goods.sales : ''"
                  :c_border_bottom="16"
                  :padding="24"
                  @cart="cartResult"
                  @show="cartShow"
                  :buy="sureCart && commentStyle.list_style != 3"
                  :btnSize="60"
                  :buyBtnImage="sureCart && commentStyle.list_style != 3 ? goodsImg.cart : ''"
                  :isUnderLinePrice="showUnderlinePrice && isListUnderlinePrice == 1 && commentStyle.list_style != 3 ? true : false"
                ></app-goods>
            </view>
        </view>
    </view>
</template>

<script>
import appGoods from '../../basic-component/app-goods/app-goods.vue';
import {mapState} from "vuex";

export default {
    name: "app-goods-recommend",
    components: {
        appGoods
    },
    props: {
        commentStyle: {
            type: Object,
            default() {
                return {
                    pic_url: '../../../static/image/icon/icon-favorite.png',
                    text_color: '#999',
                    text: '您或许喜欢',
                    list_style: 2
                }
            },
        },
        goodsList: {
            type: Array,
            default() {
                return [];
            }
        },
        theme: Object,
        sureCart: Boolean,
        showSales: Boolean,
        showBuyBtn: {
            type: Boolean,
            default() {
                return true;
            }
        },
        showUnderlinePrice: {
            type: Boolean,
            default() {
                return true;
            }
        },
        newList: Boolean,
        activity: Object,
        onlyShowTitle: Boolean,
        is_show_member: {
            type: Boolean,
            default() {
                return true;
            }
        },
        sign: String,
        detail: Object
    },
    methods: {
        cartResult() {
            this.$emit('cart',true)
        },
        cartShow(e) {
            this.$emit('show', e)
        }
    },
    computed: {
        ...mapState({
            isListUnderlinePrice: state => state.mallConfig.mall.setting.is_list_underline_price,
            goodsImg: state => state.mallConfig.__wxapp_img.goods,
        }),
    },

}
</script>

<style scoped lang="scss">
.app-goods-recommend {
    .recommend-title {
        margin: #{40rpx} 0 #{32rpx} 0;
        font-size: $uni-font-size-weak-one;
        color: $uni-general-color-two;

        .text {
            color: #999;
        }

        .border {
            height: #{2rpx};
            background-color: #bbbbbb;
            width: #{40rpx};
            margin: 0 #{24rpx};
        }


        .app-icon-love {
            width: #{24rpx};
            height: #{24rpx};
            margin-right: #{12rpx};
            // background-image: url('../../../static/image/icon/icon-favorite.png');
        }
    }
    .product-list {
        padding: 0 24rpx;
        flex-wrap: wrap;
    }
}
</style>